<template>
  <div class="nav_top">
    <svg class="icon iconRight" aria-hidden="true">
      <use xlink:href="#icon-31liebiao"></use>
    </svg>
    <div class="center">
      <span @click="router.push('/user')">我的</span><span class="active">发现</span
      ><span>云村</span><span>视频</span>
    </div>
    <svg class="icon iconLeft" aria-hidden="true" @click="router.push('/search')">
      <use xlink:href="#icon-sousuo"></use>
    </svg>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  components: {},
  setup() {
    const router = useRouter()
    return {
      router
    }
  }
})
</script>

<style scoped lang="less">
.nav_top {
  display: flex;
  align-items: center;
  height: 1rem;

  .center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .active {
      font-weight: 900;
    }
    span {
      padding-left: 0.2rem;
      padding-right: 0.2rem;
      font-size: 0.36rem;
    }
  }
  .icon {
    margin-left: 0.15rem;
    margin-right: 0.15rem;
  }
}
</style>
